<template>
  <div
    :class="['TUIKit', isH5 && 'TUIKit-h5']"
    class="border-1 border-#dcdfe6 border-dashed bg-white"
  >
    <div class="TUIKit-main-container">
      <div v-if="currentNavbar === 'conversation'" class="TUIKit-main">
        <div v-if="!(isH5 && currentConversationID)" class="TUIKit-main-aside">
          <!-- <TUISearch searchType="global" /> -->
          <TUIConversation />
        </div>
        <div v-if="!isH5 || currentConversationID" class="TUIKit-main-main">
          <TUIChat>
            <h1 class="flex-grow">欢迎使用客服系统</h1>
          </TUIChat>
          <TUIGroup :class="isH5 ? 'chat-popup' : 'chat-aside'" />
          <TUISearch :class="isH5 ? 'chat-popup' : 'chat-aside'" searchType="conversation" />
        </div>
        <TUIGroup v-if="isH5 && !currentConversationID" class="chat-popup" />
        <TUIContact displayType="selectFriend" />
      </div>
      <div v-else-if="currentNavbar === 'contact'" class="TUIKit-main">
        <TUIContact
          displayType="contactList"
          @switch-conversation="currentNavbar = 'conversation'"
        />
      </div>
      <TUICallKit class="callkit-container" :allowedMinimized="true" :allowedFullScreen="false" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { TUIStore, StoreName, TUIConversationService } from '@tencentcloud/chat-uikit-engine'
import { TUICallKit } from '@tencentcloud/call-uikit-vue'
import { TUISearch, TUIConversation, TUIChat, TUIContact, TUIGroup } from '../../../TUIKit'
import { isH5 } from '../../../TUIKit/utils/env'
import { useIMStoreWithOut } from '@/store/modules/im'
import * as SessionRecordApi from '@/api/blind/sessionRecord/index.ts'

const currentConversationID = ref<string>('')
const currentNavbar = ref<string>('conversation')

// 设置 currentConversationID
TUIStore.watch(StoreName.CONV, {
  currentConversationID: (id: string) => {
    currentConversationID.value = id
  }
})

// 获取路由
const router = useRouter()
// 监听当前路由
watch(
  () => router.currentRoute.value,
  async () => {
    const userID = useIMStoreWithOut().getIMUserID
    // 登出 IM
    await useIMStoreWithOut().reLoginTIM(userID)

    // 查询 会话列表
    await getConversationList(userID)
  },
  { immediate: true }
)

// 创建会话
const createConversation = async (userID: string) => {
  const res = await TUIConversationService.getConversationProfile(`C2C${userID}`).catch((error) => {
    console.log(error)
  })
  console.log('创建会话成功', res)
}

/** 查询会话列表 */
const getConversationList = async (id: string) => {
  try {
    const data = await SessionRecordApi.getSessionRecordPage({
      pageNo: 1,
      pageSize: 100,
      userId: id
    })

    // 清空 自定义会话ID
    // TUIStore.update(StoreName.CUSTOM, 'CustomconversationID', '')
    // DC：增加自定义的会话列表，UI 层更新自定义 Store 数据
    TUIStore.update(StoreName.CUSTOM, 'CustomconversationList', data.list)

    // 循环创建会话列表
    data.list.forEach((item) => {
      const userID = item.participants

      // 创建会话
      createConversation(userID)
    })

    return data.list
  } catch (error) {
    console.log(error)
  }
}
</script>
<style scoped lang="scss">
/* stylelint-disable-next-line import-notation */
@import '../../../TUIKit/assets/styles/common.scss';
/* stylelint-disable-next-line import-notation */
@import '../../../TUIKit/assets/styles/sample.scss';
</style>
